/**
 * 高级表格
 * 扩展表格能力
 */

import { useEffect, useState } from "react";
import "./index.less";
import { Pagination, Table, TableProps } from "antd";
import { v4 as uuidv4 } from "uuid";

interface TableProProps extends TableProps {}

/**
 * 获取第一个表格的可视化高度
 * @param {*} extraHeight 额外的高度(表格底部的内容高度 Number类型,默认为74)
 * @param {*} id 当前页面中有多个table时需要制定table的id
 */
export function getTableScroll(extraHeight: number, id: string) {
	let tHeader = null;
	if (id) {
		tHeader = document.getElementById(id) ? document.getElementById(id)?.getElementsByClassName("ant-table-thead")[0] : null;
	} else {
		tHeader = document.getElementsByClassName("ant-table-thead")[0];
	}
	//表格内容距离顶部的距离
	let tHeaderBottom = 0;
	if (tHeader) {
		tHeaderBottom = tHeader.getBoundingClientRect().bottom;
	}
	//窗体高度-表格内容顶部的高度-表格内容底部的高度
	// let height = document.body.clientHeight - tHeaderBottom - extraHeight
	let height = `calc(100vh - ${tHeaderBottom + extraHeight}px)`;
	console.log("hhhh", height);
	return height;
}

export default function TablePro(props: TableProProps) {
	let { style, pagination, dataSource, columns, ...rest } = props;
	const [scrollY, setScrollY] = useState("");
	const [tableId, setTableId] = useState<string>(uuidv4());
	//页面加载完成后才能获取到对应的元素及其位置
	useEffect(() => {
		setScrollY(getTableScroll(63, tableId));
	}, []);
	return (
		<div className="div-root">
			<Table
				id={tableId}
				className="table-pro"
				scroll={{ x: "max-content", y: scrollY }}
				style={style}
				dataSource={dataSource}
				columns={columns}
				pagination={false}
				{...rest}
			/>
			<div className="tail-line">
				<div></div>
				<Pagination {...pagination} />
			</div>
		</div>
	);
}
